//是完整版 但是业务逻辑这个是一起请求 UseEffect 三个东西一起的 index1.txs文件是逻辑是分离的更符合正常开发
import React, { useEffect, useState } from "react";
import { Row, Col, Card, Tree, Tag, Pagination, Table } from "antd";
import { useParams } from "react-router-dom";
import {findScheduleListRequest,
   hospitalDepartmentRequest,
   hosScheduleRuleRequest,
   
  } from '@/api/hospital/hospitalList'
import type {hosDepartmentListType,
  bookingScheduleListItemType,
  findScheduleListParamsType}  from '@/api/hospital/model/hospitalListType'
export default function HospitalSchedule() {
  //接收params参数
  const {hoscode} = useParams();
  //console.log(hoscode,'hoscode');

  //定义一个控制treeData的state 
  const [treeData,setTreeData] = useState<hosDepartmentListType>([])
  //定义一个时间排班规则当前页码
  const [page,setPage] = useState(1);
  //定义一个时间排班规则的每页条数
  const [limit,setLimit] = useState(3);
  //定义一个当前选中的科室
  const [department,setDepartment] = useState('200040878');
  //定义当前科室的时间的排班规则   //因为bookingScheduleList: Array(3)
  const [scheduleRule,setScheduleRule] =useState<bookingScheduleListItemType>([]);
  //定义一个当前科室排版规则总条数
  const [total,setTotal] = useState(0);
  //定义一个当前选中的时间
  const [workDate,setWorkDate]=useState('2022-04-28');

  //1.组件初始化的时候发送请求 左侧的科室
  useEffect(() =>{
    const getDepartmentList = async () => {
      const result = await hospitalDepartmentRequest(hoscode as string);
       //console.log(result,'数据来了'); 
      //只有列表的第一条有数据(后端偷懒)
      //然后和下面treeData进行结合

      //把获取的数据交给state
      setTreeData(result) 
    };
    getDepartmentList()
  },[])
   
   //2.组件初始化的时候发送请求科室排班请求 一个科室对应的排班
   useEffect(() =>{
    const getScheduleRule  = async()=>{
      const result = await hosScheduleRuleRequest({
        page:page,
        limit:limit,
        hoscode :hoscode as string,
        depcode:department,
      })
      //console.log(result,'cc');
      setScheduleRule(result.bookingScheduleList)
      setTotal(result.total)
      //把数据中第一个时间交给workdate这个状态的初始值
      setWorkDate(result.bookingScheduleList[0].workDate)
      
    };
    getScheduleRule ()
  },[page,limit])
 //3.组件初始化的时候根据科室和时间发送详细信息请求  因为hoscode已经有了    
 useEffect (() => {
  const getFindScheduleList = async () => {
    const result = await findScheduleListRequest({
      hoscode : hoscode as string,depcode:department,workDate:workDate});
      console.log(result);
      
  };
  getFindScheduleList()
 },[department])


  //1.改变页码的回调函数
  const changeHandlePage = (page:number,limit:number) => {
    setPage(page);
    setLimit(limit)
  }

  //Tree结构数据

  // 分页下面table的结构
const columns = [
  {
    title: '序号',
   render (_:any,__:any,index:number) {
    return index+1
   }
  },
  {
    title: '职称',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '号源时间',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '可预约数',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '挂号费用',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '擅长技能',
    dataIndex: 'address',
    key: 'address',
  },
];


  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    //滚动条超出就不显示 自动生成滚动条
    overflow: "auto",
  };

  return (
    <Card>
      {/* 多个就是多组件开发 栅格系统 */}
      <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
      {/* 所有的间距gutter */}
      <Row gutter={20}>
        <Col span={5}>
          <div>
            {/* treeData={treeData as []}  axios的解决网站去内看 */}
            {/* antd目前没有很好的解treeData修改字段时候用空数组代替 断言为空 */}
            {/* defaultExpandKeys默认展开东西 需要接一个数组  这个有个bug 
                 expandedKeys用这个属性 这个是受控 上面有问题          
            */}
          <Tree 
           style={treeStyle}
            treeData={treeData as []} 
            fieldNames={{title:'depname',key:'depcode'}}
            expandedKeys={['a4e171f4cf9b6816acdfb9ae62c414d7']}
            />
          </div>
        </Col>

        {/* tag标签 */}
        <Col span={19} >
          <div style={{marginBottom:'20px'}}>
            {scheduleRule.map(item =>{
                return (
                  //因为数据没有id key取数据唯一值workDate
                <Tag key={item.workDate}>
              <p>{item.workDate}</p>
              <p>{item.availableNumber}/{item.reservedNumber}</p>
                  </Tag>
                )
              })
            }
          </div>
          <Pagination  current={page} pageSize={limit} total={total} onChange={changeHandlePage}/>
          <Table columns={columns} style={{marginTop:'20px'}}></Table>
        </Col>
      </Row>
    </Card>
  );
}
